<!DOCTYPE html>
<html>
<head>
	<title></title>
	<script type="text/javascript" src="../js/vue.js"></script>
</head>
<body>
<!--
	构造 Vue 实例时传入的各种选项大多数都可以在组件里使用。只有一个例外：data 必须是函数

	例：data:function(){}
-->
<div id="example-2">
  <simple-counter></simple-counter>
  <simple-counter></simple-counter>
  <simple-counter></simple-counter>
</div>
<script type="text/javascript">
	var data = { counter: 0 }

	Vue.component('simple-counter', {
	  template: '<button v-on:click="counter += 1;con($event)">{{ counter }}</button>',
	  // 技术上 data 的确是一个函数了，因此 Vue 不会警告，
	  // 但是我们却给每个组件实例返回了同一个对象的引用
	  // data: function () {
	  //   return data
	  // },




	  	data: function () {
		  return {
		    counter: 0
		  }
		},
		methods:{
			con: function(e){
				console.log(this.counter)
			}
		}
	})

	new Vue({
	  el: '#example-2'
	})
</script>
</body>
</html>